<div class="action-bar">
  <ul>
    <li><a data-open-modal="edit-table-view-modal" data-table="table" translate="TABLE_EDIT"><!-- Edit --></a></li>
  </ul>
</div>
<div id="length-div" style="position: absolute; visibility: hidden; height: auto; width: auto; white-space: nowrap;">
</div>
<table ng-class="{'main-tbl highlight-hover': highlight, 'main-tbl': !highlight }">
  <thead>
    <tr>
      <th ng-if="table.multiSelect" class="small">
        <input type="checkbox" ng-change="table.allSelectedChanged()" ng-model="table.allSelected"/>
      </th>

      <th ng-init="calculateStyles()"
          ng-repeat="column in table.columns"
          ng-style="column.style"
          ng-if="!column.deactivated"
          ng-class="{ 'col-sort': table.predicate === column.name, 'sortable': column.sortable }"
          ng-click="table.sortBy(column)">
        <span>
          {{ column.label | translate }}
          <i ng-if="column.sortable"
             class="sort"
             ng-class="{ asc: table.predicate === column.name && !table.reverse, desc: table.predicate === column.name && table.reverse }"></i>
        </span>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="row in table.rows track by $index" data-row-id="{{ row.id }}" >
      <td ng-if="table.multiSelect"><input type="checkbox" ng-model="row.selected" ng-change="table.rowSelectionChanged($index)"></td>
      <td ng-repeat-start="column in table.columns" ng-if="!column.template && !column.translate && !column.deactivated">
        {{ row[column.name] }}
      </td>
      <td ng-if="!column.template && column.translate && !column.deactivated">
        {{ row[column.name] | translate }}
      </td>
      <td ng-repeat-end ng-if="column.template && !column.deactivated" ng-include="column.template">
      </td>
    </tr>
    <tr ng-if="table.rows.length === 0 && table.loading === false">
      <td colspan="{{table.columns.length}}" translate="TABLE_NO_RESULT"><!-- No results found --></td>
    </tr>
    <tr ng-if="table.rows.length === 0 && table.loading === true">
      <td colspan="{{table.columns.length}}" style="text-align:center"><i class="fa fa-spinner fa-spin fa-2x fa-fw"></i></td>
    </tr>
  </tbody>
</table>


<div id="tbl-view-controls-container">
  <div class="drop-down-container small flipped" old-admin-ng-dropdown>
    <span>{{ table.pagination.limit }}</span>
    <ul class="dropdown-ul">
      <li ng-repeat="x in [10, 20, 50, 100]" ng-click="table.updatePageSize(x)"><a>{{x}}</a></li>
    </ul>
  </div>

  <div class="pagination">
    <a class="prev" ng-class="{disabled: !table.isNavigatePrevious()}" ng-click="table.goToPage(table.pagination.offset - 1)"></a>
    <a ng-repeat-start="page in table.getDirectAccessiblePages()" ng-class="{wide: table.maxLabel.length > 2}" ng-if="page.active" class="active">{{ page.label }}</a>
    <a ng-click="table.goToPage(page.number)" ng-class="{wide: table.maxLabel.length > 2}" ng-repeat-end ng-if="!page.active">{{ page.label }}</a>
    <a class="next" ng-class="{disabled: !table.isNavigateNext()}" ng-click="table.goToPage(table.pagination.offset + 1)" ></a>
  </div>
</div>

